<template>
	<view class="searchaddress">
		<uniNavbar v-on:clickLeft="clickBack()" leftIcon="back" shadow="false">
			<input class="search-val" type="text" v-model="keyword" slot="title" maxlength="50" cursor-spacing="20" focus
			 confirm-type="done" placeholder="填写小区/写字楼" />
		</uniNavbar>
		<view class="result">
			<view class="result-list" v-for="(result,index) in resultList" :key="index" @tap="chooseThisAddress(result)">
				<view class="build">
					{{result.details}}
				</view>
				<view class="street-number">
					{{result.street_number}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import map_tx from '@/common/map/qqmap-wx-jssdk.min.js'
	import uniNavbar from "@/components/sea-address/uni-nav-bar.vue"
	import location from '@/common/localstorage/localstorage.js'
	export default {
		components: {
			uniNavbar
		},
		props: {
			showSearchaddress: false
		},
		data() {
			return {
				keyword: '',
				resultList: []
			}
		},
		onShow() {
			this.$setTitle('Happy先生·地址搜索')
		},
		onLoad() {
			// #ifdef H5
			//this.loadScript()
			// #endif
		},
		methods: {
			//获取关键字地图 H5
			getSuggestionByH5() {
				let _this = this;
				let keyword = this.keyword;
				uni.showLoading({
					title: "请骚等..."
				})
				var options = {
					pageCapacity: 6,
					onSearchComplete: function(results) {
						uni.hideLoading()
						// 判断状态是否正确
						if (local.getStatus() == BMAP_STATUS_SUCCESS) {
							var s = [];
							for (var i = 0; i < results.getCurrentNumPois(); i++) {

								var resultItem = results.getPoi(i);
								if (resultItem.title && results.city == resultItem.title) {
									continue;
								}
								if (resultItem.tags && resultItem.tags.some(function(item) {
										return item == "公交车站"
									})) {
									continue;
								}
								s.push({ // 获取返回结果，放到sug数组中
									details: resultItem.title,
									street_number: resultItem.address,
									city: resultItem.city,
									district: "",
									province: resultItem.province,
									lat: resultItem.point.lat,
									lng: resultItem.point.lng
								});
							}
							_this.resultList = s;
						}
					}
				};
				var local = new BMap.LocalSearch('上海', options);

				local.search(keyword);
			},
			//获取关键字地图 微信小程序
			getsuggestByMpweixin() {
				var _this = this;
				if (this.keyword.length == 0) {
					this.resultList = [];
				};
				let qqmapsdk = new map_tx({
					key: 'JHDBZ-SGWK5-SVEIU-QZMEF-JPTUO-K6B2M'
				});
				uni.showLoading({
					title: "请骚等..."
				})
				//调用关键词提示接口
				qqmapsdk.getSuggestion({
					//获取输入框值并设置keyword参数
					keyword: _this.keyword, //用户输入的关键词，可设置固定值,如keyword:'KFC'
					region: '上海', //设置城市名，限制关键词所示的地域范围，非必填参数
					page_size: 10,
					success: function(res) { //搜索成功后的回调
						var sug = [];
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i].type != 3 && res.data[i].type != 5) {
								sug.push({ // 获取返回结果，放到sug数组中
									details: res.data[i].title,
									street_number: res.data[i].address,
									city: res.data[i].city,
									district: res.data[i].district,
									province: res.data[i].province,
									lat: res.data[i].location.lat,
									lng: res.data[i].location.lng
								});
							}
						}
						_this.resultList = sug;
					},
					fail: function(error) {
						console.error(error);
					},
					complete: function(res) {
						uni.hideLoading()
						console.log(res);

					}
				});
			},
			//统一接口
			searchAddress() {
				// #ifdef H5
				this.getSuggestionByH5()
				// #endif
				// #ifndef H5
				this.getsuggestByMpweixin();
				// #endif
			},
			//选中这个地址
			chooseThisAddress(addr) {
				let that = this;

				// #ifdef H5
				this.reverseGeocoderH5(addr)
				// #endif

				// #ifdef MP-WEIXIN
				location.setStorage({
					key: 'mylocationforindex',
					jsonstr: JSON.stringify(addr),
					success: function() {
						that.clickBack()
					}
				});
				// #endif
			},
			//H5经纬度转地址
			reverseGeocoderH5(addr) {
				let that = this;
				uni.showLoading({
					title: "请骚等..."
				})

				var geoc = new BMap.Geocoder();
				var point = new BMap.Point(addr.lng, addr.lat);

				geoc.getLocation(point, function(rs) {
					uni.hideLoading()
					var addComp = rs.addressComponents;

					console.log(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " +
						addComp.streetNumber);

					addr.district = addComp.district
					console.log(addr)
					location.setStorage({
						key: 'mylocationforindex',
						jsonstr: JSON.stringify(addr),
						success: function() {
							that.clickBack()
						}
					});
				});
			},
			//关闭当前搜索地址页面
			clickBack() {
				uni.reLaunch({
					url: '../../pages/tabBar/index'
				});
			}
		},
		watch: {
			keyword: function(val) {
				if (val.length > 0) this.searchAddress();
				else this.resultList = [];
			}
		}
	}
</script>

<style lang="scss">
	.searchaddress {
		height: 100vh;
	}

	.search-val {
		width: 90%;
		height: 60upx;
		line-height: 60upx;
		margin-top: 14upx;
		background-color: #f4f4f4;
		padding-left: 20upx;
		padding-right: 10upx;
		color: #333333;
		font-size: 28upx;
	}

	::-moz-placeholder {
		color: #aeaeae;
	}

	::-webkit-input-placeholder {
		color: #aeaeae;
	}

	:-ms-input-placeholder {
		color: #aeaeae;
	}

	.result {
		height: 98%;
		padding: 40upx 0 40upx 2%;
		margin-bottom: 50upx;

		.result-list {
			margin-bottom: 20upx;
			border-bottom: 1px solid #f4f4f4;

			.build {
				line-height: 48upx;
				font-size: 28upx;
				font-weight: 600;
				color: #000;
			}

			.street-number {
				font-size: 24upx;
				color: #999;
				line-height: 60upx;
			}
		}
	}
</style>
